<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.global.js"></script>
</head>

<body>
    <div id="app">
        <p>count:{{count}}</p>
        <p>doubleCount:{{doubleCount}}</p>
        <p>
            <button @click="addCount">count++</button>
        </p>

        <p v-color="color">{{$a}}----{{$b}}</p>
        <p v-color="color">{{x}}----{{y}}</p>
        <comp-a></comp-a>
    </div>

</body>
<script>
    // vue2   
    // 引入vue.js 之后会得到全局的构造函数

    // vue2注册属性 全局组件 全局指令 全局混入 插件
    // Vue.prototype.$a = 1;
    // Vue.prototype.$b = 2;
    // Vue.component("com-a", {})
    // Vue.directive("color", function () { })
    // Vue.mixin({})



    /* var app = new Vue({
        el:"#app",
        data:{
            count:1,
        },
        methods: {
            addCount(){
                this.count ++;
            }
        },
        computed:{
            doubleCount:function(){
                return this.count *2;
            }
        },
        watch:{
            count(newVal,oldVal){
                console.log("count改变了",newVal,oldVal);
            }
        },
        mounted() {
            console.log("组件挂载完毕");
        },
    }) */


    // Vue3 => 
    // 引入vue.global.js => 全局的对象Vue, 存放诸多属性和方法可供使用
    console.log(Vue);


    // Vue3 选项式写法注意
    // 1. 引入vue.global.js => 全局的对象Vue, 存放诸多属性和方法可供使用
    // 2. 创建Vue实例 => 需要借助createApp方法
    // 3. 没有el选项,挂载实例是需要借助mount()
    // 4. data选项要求是返回对象的函数 => Vue实例 => 组件(根组件 普通组件)
    // 5. Vue实例创建过程中,通过data,computed,methods选项创建的 数据 计算属性 方法,不在存储到实例上, 而是单独创建了一个代理对象,可以通过代理对象进行取值和赋值  => this=>指向代理对象,不在指向当前实例

    // let createApp = Vue.createApp;
    let { createApp } = Vue;

    // 创建实例 (根实例)
    let app = createApp({
        // el:"#app",   // 没有el选项,挂载实例是需要借助mount()
        data() {
            return {
                count: 1,
                color:"red",
            }
        },
        methods: {
            addCount() {
                this.count++;
            }
        },
        computed: {
            doubleCount: function () {
                return this.count * 2;
            }
        },
        watch: {
            count(newVal, oldVal) {
                console.log("count改变了", newVal, oldVal);
            }
        },
        mounted() {
            console.log("组件挂载完毕", this);
            console.log("组件挂载完毕", this.$a);
            console.log("组件挂载完毕", this.$b);
        },
    })

    console.log("根实例", app);

    // vue3 注册属性 全局组件 全局指令 全局混入 插件

    let myPlugins = {
        install(app, options) {
            console.log("使用插件");

            app.config.globalProperties.$a = 1;
            app.config.globalProperties.$b = 2;

            app.component("comp-a", {
                template: `<div>这是组件A</div>`
            })

            app.directive("color", function (el, binding) {
                let { value } = binding;
                el.style.color = value;
            })

            app.mixin({
                data() {
                    return {
                        x: 10,
                        y: 20,
                    }
                }
            })
        }
    }

    app.use(myPlugins,{a:1,b:2});

    // 挂载实例
    app.mount("#app");





</script>

</html>